<template>
    <div class="main">
        <!-- 侧边栏tabs -->
        <div class="el-tabs">
            <div class="el-tabs_item">
                <span class="subtitle">概览</span>
                <i class="el-icon-refresh"></i>
            </div>

            <div
                class="el-tabs_item"
                :class="{ active: item.status === status }"
                v-for="item in tabs"
                :key="item.status"
                @click="getList(item.status)"
            >
                <span slot="label">
                    <i :class="item.icon"></i> {{ item.title }}
                </span>
                <el-badge
                    :value="item.value"
                    :max="99"
                    :type="item.type"
                    class="sup"
                />
            </div>
        </div>

        <!-- 列表table -->
        <div class="el-content el-mg-20">
            <!-- 表格过滤 -->
            <el-form
                :inline="true"
                :size="$formSize"
                class="table-filter el-box-init el-bkgd-white el-mg-b-10"
            >
                <el-form-item label="博文标题" class="el-mg-r-30">
                    <el-input
                        v-model="search.keywor"
                        clearable
                        placeholder="请输入文章标题"
                    />
                </el-form-item>

                <el-form-item>
                    <el-button
                        type="success"
                        round
                        icon="el-icon-search"
                        @click="onSearch"
                    >
                        查询
                    </el-button>
                    <el-button
                        type="warning"
                        round
                        icon="el-icon-refresh"
                        @click="onReset"
                    >
                        重置
                    </el-button>
                </el-form-item>
            </el-form>

            <div class="table-wrap el-box-init el-bkgd-white">
                <!-- 操作按钮 -->
                <el-row class="table-btn el-pd-b-20">
                    <el-button
                        type="primary"
                        icon="el-icon-plus"
                        :size="$btnSize"
                        v-if="isAuth('BLOG_ARTICLE_ADD') && status != 3"
                        @click="onAddOrUpdate()"
                    >
                        新增
                    </el-button>
                    <el-button
                        type="warning"
                        :size="$btnSize"
                        v-if="isAuth('BLOG_ARTICLE_SORT') && status != 3"
                        @click="onUpdateSort()"
                    >
                        更新排序
                    </el-button>
                    <el-button
                        type="success"
                        :size="$btnSize"
                        v-if="
                            allDelBtnVisible &&
                            isAuth('BLOG_ARTICLE_PUBLISH') &&
                            status != 3 &&
                            status != 1
                        "
                        @click="articleStateChange(1)"
                    >
                        批量发布
                    </el-button>
                    <el-button
                        type="warning"
                        :size="$btnSize"
                        v-if="
                            allDelBtnVisible && isAuth('BLOG_ARTICLE_RECYCLE')
                        "
                        @click="
                            articleStateChange(
                                status != 2 && status != 0 ? 2 : 3
                            )
                        "
                    >
                        {{
                            status != 2 && status != 0 ? "批量草稿" : "批量回收"
                        }}
                    </el-button>
                    <el-button
                        type="danger"
                        icon="el-icon-delete"
                        :size="$btnSize"
                        v-if="allDelBtnVisible && isAuth('BLOG_ARTICLE_DEL')"
                        @click="onDel()"
                    >
                        批量删除
                    </el-button>
                </el-row>

                <el-table
                    v-loading="table.loading"
                    :data="table.list"
                    :size="$tableSize"
                    stripe
                    border
                    ref="tableRef"
                    :header-cell-style="tableHeaderStyle"
                    @selection-change="handleSelectionChange"
                    :row-key="getRowKeys"
                >
                    <el-table-column type="selection" width="40" />

                    <el-table-column prop="id" label="博文ID" width="80" />

                    <el-table-column prop="title" label="博文标题" />

                    <el-table-column
                        prop="status"
                        label="状态"
                        v-if="status == 0"
                        width="120"
                        align="center"
                    >
                        <template slot-scope="{ row }">
                            <el-tag
                                v-for="tag in tabs"
                                :key="tag.status"
                                v-show="tag.status == row.status"
                                :type="tag.type"
                            >
                                {{ tag.title }}
                            </el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="support"
                        label="是否推荐"
                        width="80"
                        align="center"
                        v-show="status != 3"
                    >
                        <template slot-scope="{ row }">
                            <el-tag
                                :type="row.support == 1 ? 'primary' : 'warning'"
                            >
                                {{ row.support == 1 ? "是" : "否" }}
                            </el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="click"
                        label="浏览量"
                        width="80"
                        align="center"
                        v-if="status != 3"
                    />

                    <el-table-column
                        prop="issuer_name"
                        label="创建人"
                        width="100"
                        align="center"
                    />
                    <!-- <el-table-column
                        prop="modifier_name"
                        label="编辑人"
                        width="80"
                        align="center"
                    /> -->

                    <el-table-column prop="created_time" label="创建时间">
                        <template slot-scope="{ row }">
                            {{ row.created_time | formatTime }}
                        </template>
                    </el-table-column>

                    <el-table-column
                        label="操作"
                        :width="$maxActionWidth"
                        align="center"
                        fixed="right"
                    >
                        <template slot-scope="{ row }">
                            <!-- 评论 -->
                            <el-button
                                :size="$btnSize"
                                type="success"
                                v-if="row.status == 1"
                                @click="onGoComment(row)"
                            >
                                评论
                            </el-button>
                            <!-- 编辑 -->
                            <el-button
                                size="mini"
                                type="primary"
                                v-if="isAuth('BLOG_ARTICLE_ADD')"
                                @click="onAddOrUpdate(row.id)"
                            >
                                <i class="el-icon-edit el-mg-r-5"></i>
                                编辑
                            </el-button>
                            <el-button
                                type="success"
                                :size="$btnSize"
                                v-if="
                                    isAuth('BLOG_ARTICLE_PUBLISH') &&
                                    row.status == 2
                                "
                                @click="articleStateChange(1, row.id)"
                            >
                                发布
                            </el-button>
                            <!-- 回收 -->
                            <el-button
                                size="mini"
                                type="warning"
                                v-if="isAuth('BLOG_ARTICLE_DEL')"
                                @click="
                                    articleStateChange(
                                        row.status == 2 ? 3 : 2,
                                        row.id
                                    )
                                "
                            >
                                <i class="el-mg-r-5"></i>
                                {{ row.status == 2 ? "回收" : "草稿" }}
                            </el-button>
                            <!-- 删除 -->
                            <el-button
                                size="mini"
                                type="danger"
                                v-if="isAuth('BLOG_ARTICLE_DEL')"
                                @click="onDel(row.id)"
                            >
                                <i class="el-icon-delete el-mg-r-5"></i>
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 表格分页 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="table.currentPage"
                    :page-sizes="table.pageSizes"
                    :page-size="table.pageSize"
                    :layout="table.layout"
                    :total="table.total"
                    background
                >
                </el-pagination>
            </div>

            <dialog-add-or-update ref="addOrUpdate" :id="table.rowId" />
        </div>
    </div>
</template>


<script>
import DialogAddOrUpdate from "./add-or-update.vue";
import { adminArticle as Api } from "api";
import { tableMethodsMixins } from "@/global/utils/mixins";

export default {
    mixins: [tableMethodsMixins],
    components: {
        DialogAddOrUpdate,
    },
    data() {
        return {
            status: 0, // 当前tabs状态
            tabs: [], // tabs侧边栏

            allDelBtnVisible: false, // 表格全选

            search: {
                keywor: "",
            },

            //表格
            table: {
                loading: false,
                rowId: 0,
                list: [],
                currentPage: this.$config.pagination.currentPage, // 默认页
                pageSize: this.$config.pagination.pageSize, // 每页多少条
                pageSizes: this.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
                layout: this.$config.pagination.layout, // 组件布局，子组件名用逗号分隔
                total: 0, // 总条数
            },

            // 表格头部样式
            tableHeaderStyle() {
                return "background:#f0f2f5";
            },

            // 回显选择过的列
            getRowKeys(row) {
                return row.id;
            },
        };
    },
    created() {
        this.getTabs();
        this.getList().then(() => {
            this.rowDrop(); // 初始化列表后执行拖拽方法
        });
    },
    methods: {
        async getTabs() {
            const { code, data } = await this.$axios.get(Api.getTabs);

            if (code == 200) this.tabs = this.$utils.getTabs(data.list);
        },
        /* 获取列表 */
        async getList(status) {
            const { code, data } = await this.$axios.get(Api.getList, {
                params: {
                    status: status || 0,
                    keywor: this.search.keywor,
                    page: this.table.currentPage, //查询第几页
                    per_page: this.table.pageSize, //每页多少条数据
                },
            });

            if (code == 200) {
                this.status = status || 0;
                this.table.list = data.list;
                this.table.total = data.total;

                // 关闭加载提示
                this.table.loading = false;
            }
        },

        /* 查询 */
        onSearch() {
            this.table.loading = true;

            this._initTableSelectionIds();
        },

        /* 重置 */
        onReset() {
            this.search.keywor = "";
        },

        /* 新增、编辑 */
        onAddOrUpdate(id) {
            this.table.rowId = id;
            this.$refs.addOrUpdate.visible = true; // 弹窗开关
        },

        /* 跳转评论 */
        onGoComment(row) {
            this.$router.push({
                path: "/bbs/comment",
                query: {
                    article_id: row.id,
                    keywor: row.title,
                },
            });
        },

        /* 文章状态操作 */
        async articleStateChange(status, id) {
            if (!id) id = this.table.selectIds.map((item) => item.id).join(",");

            // 确认删除
            const confirm = await this.$msgBox.confirm({
                cancel: true,
                msg: `您当前操作会变更文章状态`,
            });

            if (confirm) {
                const { code, msg, data } = await this.$axios.put(
                    Api.articleStateChange,
                    { id, status }
                );
                if (code === 200) {
                    this.$msg.success(msg);
                    this._initTableSelectionIds();
                } else {
                    this.$msg.error(msg ? msg : data);
                }
            }
        },

        /* 排序 */
        async onUpdateSort() {
            const sortList = this.table.list.map((item, index) => ({
                id: item.id,
                sort:
                    index + (this.table.currentPage - 1) * this.table.pageSize,
            }));

            const { code, msg, data } = await this.$axios.post(
                Api.onUpdateSort,
                {
                    sortList: JSON.stringify(sortList),
                }
            );

            if (code == 200) {
                this.$msg.success(msg);

                // 初始化清除表格选中、刷新
                this._initTableSelectionIds();
            } else {
                this.$msg.error(msg ? msg : data);
            }
        },

        /* 删除 */
        async onDel(id) {
            if (!id) id = this.table.selectIds.map((item) => item.id).join(",");

            // 确认删除
            const confirm = await this.$msgBox.confirm({
                cancel: true,
            });

            if (confirm) {
                const { code, msg, data } = await this.$axios.delete(Api.del, {
                    data: { id },
                });

                if (code === 200) {
                    this.$msg.success(msg);
                    this._initTableSelectionIds();
                } else {
                    this.$msg.error(msg ? msg : data);
                }
            }
        },

        /**
         * 表格全选
         */
        handleSelectionChange(rows) {
            this.table.selectIds = rows;

            this.allDelBtnVisible = this.table.selectIds.length ? true : false;
        },

        /* 每页多少条 */
        handleSizeChange(val) {
            this.table.loading = true;
            this.table.pageSize = val;
            this._initTableSelectionIds();
        },
        /* 当前页  */
        handleCurrentChange(val) {
            this.table.loading = true;
            this.table.currentPage = val;
            this._initTableSelectionIds();
        },
        /**
         * 初始化清除表格选中、全选数组、表格刷新
         */
        _initTableSelectionIds() {
            this.$refs.tableRef.clearSelection(); // 清除表格选择
            this.table.selectIds = []; // 清除表格全选
            this.getTabs();
            this.getList();
        },
    },
};
</script>

<style lang="less" scoped>
.main {
    display: flex;
    height: 100%;
}
.el-tabs {
    display: flex;
    flex-direction: column;
    width: 200px;
    min-width: 200px;
    background: #fff;

    .el-tabs_item {
        height: 40px;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f0f2f5;
        cursor: pointer;

        .sup {
            /deep/ .el-badge__content {
                border-radius: 5px !important;
            }
        }
    }
    .el-tabs_item:not(:nth-child(1)) {
        padding: 10px 10px 0;
        // padding: 0;

        &:hover {
            background: #f0f2f5;
        }
    }

    .el-tabs_item.active {
        background: #f0f2f5;
    }
}

.el-content {
    flex: 1;
}
</style>